@charset "UTF-8";
@import url('base.css');
.header{}
.header .top_boxw{transition: 0.5s;position:fixed; width: 100%; z-index: 100; top: 0; background: rgba(0,0,0,0.4)}
.header .logo img{height: .45rem;}
.header .other{}
.header .language{white-space: nowrap;display: flex; margin-right: .3rem}
.header .language:before{content: '';margin-right: .1rem; display: inline-block;background: url("../images/language.svg") no-repeat; width:.23rem; height:.23rem; background-size: contain}
.header menu li{position: relative}
.header menu li span{display: block;position: relative}
.header menu li .sub{background-color:rgba(0,0,0,0.4);transition:0.3s;}
.header menu li .sub dl{position:relative;z-index:1;--top:0}
.header menu li .sub dd{position:relative;z-index:1;}
.header menu li .sub a{color:var(--white);display:block; padding: .1rem}
.header menu li .sub a:hover{background: #fbf4f6; color: var(--hover-color);}

body.no_banner .header .top_boxw,
header.show .top_boxw{background: #fff; box-shadow:  0 12px 29px rgba(0,0,0,0.03)}
body:not(.no_banner) .top_boxh{display: none}
body:not(.no_banner) .header:not(.show) .language,
body:not(.no_banner) .header:not(.show) .logo,
body:not(.no_banner) .header:not(.show) .open-search{ filter: brightness(0) invert(1);}

/*open-search*/
.open-search{cursor: pointer; background: url("../images/search.svg") no-repeat center center; display: none}
.open-search[rel="absolute"]{position: absolute; top: 50%;}
.open-search[rel="relative"]{position: relative;}
.open-search.on{background: none!important;}
.open-search.on:before,
.open-search.on:after{position: absolute; content: ''; width: 70%; left: 15%; height: 3px; top: 50%; margin-top: -1.5px;background: #fff;transform: rotate(45deg);-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);}
.open-search.on:after{transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);}

.top-search{position: relative;padding-right: 50px; border-radius: 30px; background: rgba(255,255,255,0.5); box-shadow: 0 0 5px rgba(0,0,0,0.1)}
.top-search[rel="absolute"]{position: absolute; top: 100%; right: 0; z-index: 100; width: 100%;max-width: 320px;}
.top-search .text{width: 100%; height: 40px; line-height: 40px; border: 0;background:none; padding: 0 10px;color: #222;}
.top-search .text.focus{color: #333;}
.top-search .btn{position: absolute; right: 0; top: 0; height: 100%; width: 50px;background: url("../images/search.svg") no-repeat center center}

@media(max-width:1024px){
.has-multi aside,
.has-sub span{padding-right: 0.4rem;}
.has-multi aside .op-multi,
.has-sub span .op{width: 0.4rem; }
.has-multi aside .op-multi:before,
.has-multi aside .op-multi:after,
.has-sub span .op:before,
.has-sub span .op:after{width: 0.12rem; height: 0.02rem;}
.has-multi aside .op-multi:after,
.has-sub span .op:after{ width: 0.02rem; height: 0.12rem;}
}

@media (min-width:1025px) {
body:not(.no_banner) .header:not(.show) menu li:not(.aon) span a{color: #fff}
.header .other{width:18%}
.header menu {transition: 0.5s;width: 50%; max-width: 7rem}
.header menu li span{line-height: 1rem}
.header menu li.aon span a{color: rgb(var(--rgb-main-color))}
.header menu li.active .sub{transform:translateY(0);visibility:visible;opacity:1}
.header menu li .sub{ text-align: center; width:14em; position:absolute; left:50%; top:100%; transform:translateY(0.3rem); opacity:0; visibility:hidden; margin-left:-7em;}
.header menu li.has-sub span a:after{content:'';position: absolute;left:0;right: 0; bottom: 0; margin: auto; display:block;width:0.13rem;height:0.08rem;/*background:center center no-repeat url(../images/menu-select.svg);*/background-size:contain;transition:0.3s}
.header menu li.has-sub.active span a:after{transform:rotate(-180deg);background-image:url(../images/menu-select-color.svg)}
.header.show menu {padding: .1rem 0}
}
@media (max-width:1024px) {
.header .logo img{height: .4rem}
.header .language{margin-right: .1rem}
.top-search{position: absolute; display: none}
.open-search{display: block; width: .4rem; height: .4rem; margin-right: .1rem}
.open-search:before,
.open-search:after{content: '';left:0; right: 0; top:0; bottom: 0; margin: auto; position: absolute; width: 70%; height: 3px;background: #fff;opacity: 0; transition: 0.3s;}
.search-show .open-search{background: none}
.search-show .open-search:before{opacity: 1; transform: rotate(-45deg);}
.search-show .open-search:after{opacity: 1; transform: rotate(45deg);}
.search-show .top-search{display: block; top: 100%;left: 3%; right: 3%}

.open-menu{position: relative;background-color: var(--hover-color);border-radius: 50%;z-index: 10; width: 40px; height: 40px;}
.open-menu i{height: 0.03rem; width: 70%; left:0; right: 0; top:0; bottom: 0; margin: auto; position: absolute; background: #fff; transition: 0.3s;}
body:not(.menu-show) .open-menu i:nth-child(1){transform: translateY(-.1rem)}
body:not(.menu-show) .open-menu i:nth-child(3){transform: translateY(.1rem)}
body.menu-show .open-menu i:nth-child(2){opacity: 0;}
body.menu-show .open-menu i:nth-child(1){transform: rotate(-45deg);}
body.menu-show .open-menu i:nth-child(3){transform: rotate(45deg);}
body.menu-show{overflow: hidden;}
body.menu-show .header .top_boxw{background: #fff; box-shadow:  0 12px 29px rgba(0,0,0,0.03)}
body.menu-show .header .logo,
body.menu-show .header .language,
body.menu-show .header .open-search{ filter:none!important}
body.menu-show menu{left: 0;opacity: 1; transform: translateX(0);}
.header .logo{padding: .2rem 0}
.header menu{position: fixed; left:-100%;opacity: 0;transform: translateX(-100%);top:.8rem;bottom: 0; width: 3rem; background-color: var(--white);box-shadow: 0 0.1rem 0.1rem rgba(0,0,0,0.1);transition: 0.3s;}
.header menu ul{overflow: auto;height: 100%;}
.header menu li{width: 100%}
.header menu li.has-sub span{padding-right: 1rem;}
.header menu li.has-sub span:after{content:'';display:block;width:0.13rem;height:0.08rem;background:center center no-repeat url(../images/menu-select.svg);background-size:contain;margin-left:0.1rem;transition:0.3s;position: absolute;right: 0.2rem;top: 50%;margin-top: -0.04rem;}
.header menu li.has-sub.active span:after{transform:rotate(-180deg);background-image:url(../images/menu-select-color.svg)}
.header menu li span{line-height: 3; border-bottom: 1px solid rgba(0,0,0,0.1);}
.header menu li span a{justify-content: space-between;padding: 0 3%;}
.header menu li .sub,
.header menu li .sub dl dl{display: none;}
.header menu li.active .sub{display: block;}
}
@media (max-width:640px) {
body:not(.no_banner) .top_boxh{display: block}
body:not(.no_banner) .header:not(.show) .logo{ filter:none;}
}





.inside_banner{position: relative}
.inside_banner .box{color: #fff; position: absolute; width: 100%; top:50%; transform: translateY(-50%); z-index: 5; text-align: center}
.inside_banner .txt{line-height: 1.2}
.inside_banner .en{text-transform: uppercase;}
.inside_banner .cn{}
.inside_banner .pic img{width: 100%}
.slide_banner{position: relative}
.slide_banner .swiper-pagination{bottom: .4rem!important;filter: brightness(0) invert(1);}
@media(min-width:1024px){
.inside_banner .pic img.wap{display: none}
.slide_banner#wap{display: none}
}
@media(max-width:1024px){
.inside_banner .pic img.pc{display: none}
.slide_banner#pc{display: none}
}




.footer{background:#000000;}
.footer,
.footer a:not(:hover){color:#fff}
.footer .box1{padding:3% 0}
.footer .column{width:60%}
.footer .column dt{padding-bottom:.4rem}
.footer .column dd span{display: block;padding: .1rem 0}
.footer .other{width:38%; max-width: 3.7rem}
.footer .other .txt{line-height: 1; padding: .2rem 0}
.footer .other .txt b{color:rgb(var(--rgb-main-color))}
.footer .other ul{max-width:2.5rem}
.footer .other ul li{width:46%; text-align: center}
.footer .other ul li img{width: 100%}
.footer .other ul li p{padding-top: .1rem}
.footer .copyright {padding:2% 0; text-align: center; border-top: solid 1px rgba(255,255,255,0.5); opacity: 0.7}
.footer .copyright a{display: inline-block; margin-left: .1rem}
@media(max-width:1024px){
.footer .column{width:100%; order: -1; padding-bottom: 4%}
}
@media(max-width:640px){
.footer .column{display: none}
.footer .other{width:100%;}
}

.sideOther {display: none}
.sideOther ul{ position:fixed; right:1%; z-index:110; top:80%;  transform: translateY(-50%); box-shadow: 0 0 30px rgba(147,81,117,.07); }
.sideOther li{ position:relative; padding: .06rem}
.sideOther li > a{ display:flex; justify-content: center; align-items: center; width:.46rem; height:.46rem; background:rgb(var(--rgb-main-color)); transition:0.3s; border-radius: 100%; cursor: pointer;}
.sideOther li > a img{max-width: .22rem}
.sideOther li > a:hover{ transform:rotate(360deg); -webkit-transform:rotate(360deg); -ms-transform:rotate(360deg);background-color:var(--hover-color);}
.sideOther li  aside{ display:none; position:absolute; right:100%; line-height:60px; white-space:nowrap; text-overflow:ellipsis; top:0;background:var(--hover-color); margin-right:1px;border-radius:5px; padding:10px; font-size:18px; color:#fff; width: 140px}
.sideOther li  aside img{width: 100%;border-radius:5px;}
.sideOther li:hover aside{ display:block;} 
.sideOther li:hover  > a img{filter: brightness(0) invert(1);}

.no_banner .subMenu{background: #f8f8f8;}
.subMenu {padding: .1rem 0; line-height: .5rem; border-bottom: solid 1px #f0f0f0}
.subMenu .{justify-content: flex-end}
.subMenu .colName{color: #fff; padding: 0 .1rem;background: var(--hover-color) url("../images/menu.png") no-repeat 98% center; background-size: 30px}
.subMenu .menu{flex: 1}
.subMenu .menu li{ border-radius: 3vw;transition: 0.5s}
.subMenu .menu li a{display: block; padding: 0 2vw; transition: 0.5s}
.location{background: url(../images/location.svg) no-repeat left; padding-left: 25px;order: 2}
@media(min-width:768px){
.subMenu .colName{display: none}
.subMenu .menu li:not(:last-child){margin-right:1vw}
.subMenu .menu li:hover,
.subMenu .menu li.onli{background: var(--hover-color);}
.subMenu .menu li:hover a,
.subMenu .menu li.onli a{color: #fff;}
}
@media(max-width:768px){
.location{order: -1; width: 100%}
.subMenu {line-height: .5rem;}
.subMenu .{justify-content: flex-start}
.subMenu .menu{flex:initial; width: 100%}
.subMenu .menu ul{display: none; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1)}
}

.more_a{display: block; position: relative; z-index: 5}
.more_a a{color: #fff;text-indent: .30rem; display: inline-block; width: 1.60rem; line-height: .5rem; border-radius: 30px; background: rgba(var(--rgb-main-color),1) ; position: relative; transition: 0.5s}
.more_a a:after{content: ''; position: absolute; left: 70%; top: 0; bottom: 0; margin: auto;background: url("../images/more_jt.png"); width: 15px; height: 8px;transition: 0.5s}
.more_a a:hover{text-indent: .60rem;}
.more_a a:hover:after{left: 20%;}
@media(max-width:640px){
.more_a a{width: 1.4rem;line-height:.42rem;text-indent: .20rem; }
.more_a a:hover{text-indent: .40rem;}
}

.common_title{text-align: center}
.common_title h3{line-height: 1.3}
.common_title h3 span{display: block; }
.common_title h3 span.en{text-transform: uppercase; opacity: 0.8}
.common_title h3 span.cn{font-weight: 700}

.main_about .group_item:nth-child(even){background: url("../images/bg.jpg") repeat}

#about .article{text-align: center; padding-top: 5%}
#about .tit b{display: block}
#about .tit span{position: relative;padding: 0px .3rem; display: inline-block}
#about .tit span:before,
#about .tit span:after{content: '';position: absolute; width: .2rem; height: .2rem; border: solid 0px rgb(var(--rgb-main-color))}
#about .tit span:before{border-top-width: 2px;border-right-width: 2px; right: 0; top: 0}
#about .tit span:after{border-left-width: 2px;border-bottom-width: 2px; left: 0;bottom: 0}
#about .photo{width: 40%; margin: auto;position: relative}
#about .photo img{ border-radius: 0 20px 0 20px}
#about .photo:before{content: ''; position: absolute; width: 100%; height: 100%; border-radius: 0 20px 0 20px; border: solid 1px rgb(var(--rgb-main-color)); transform: translate(10px,10px)}

#history .list{border-left: solid 2px rgb(var(--rgb-main-color))}
#history .list dl{padding: 1% 0}
#history .list dt{position: relative;padding-left: .3rem; color: rgb(var(--rgb-main-color))}
#history .list dt:before{content: '';position: absolute;top: 0; bottom: 0;left: -.09rem;  margin: auto; width: .16rem; height:.16rem;background: rgb(var(--rgb-main-color)); border-radius: 100%; transition: 0.5s}
#history .list dd{padding: 0 .3rem}
#history .list dl:hover dt:before{box-shadow: 0 0 0 .05rem rgba(var(--rgb-main-color),0.5)}

#honors .list{padding: 3% 0}
#honors	.swiper-slide{
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
	 }
#honors .item{display: block;width: 100%; text-align: center;}
#honors .item figure{padding-bottom: 150%}
#honors .item figure img{ -webkit-transform:scale(0.8);transform:scale(0.8)}
#honors .item .txt{line-height: 2}
#honors	.swiper-slide-active,
#honors .swiper-slide-duplicate-active{ transform: scale(1);}
#honors .item:hover figure img{ -webkit-transform:scale(0.95);transform:scale(0.95)}
#honors .swiper-pagination{position: relative; bottom: auto; padding-top: 2%}

#video{position: relative}
#video .box{position: absolute; width: 100%; top:50%; transform: translateY(-50%)}
#video .photo img{width: 100%}
#video .common_title{padding-bottom:3rem; color: #fff}

.pro_filter h3{color: rgb(var(--rgb-red)); padding-bottom: 1%;margin-bottom: 2%; border-bottom: solid 1px #eee}
.pro_filter dl{padding: 1% 0}
.pro_filter dt{width:1.2rem; text-align: center;line-height: 40px;}
.pro_filter dt b{display: block; color:rgb(var(--rgb-white)); background: rgb(var(--rgb-main-color));position: relative;margin-right: 10px;}
.pro_filter dt b:after{content: ''; width: auto; height: auto; position: absolute; top: 50%; transform: translateY(-50%); right: -10px; left: auto;
 padding-top: 0; border-radius: 0;  border-bottom: 10px solid transparent;  border-top: 10px solid transparent;  border-left: 10px solid rgb(var(--rgb-main-color));}
.pro_filter dd{width: calc(100% - 1.3rem)}
.pro_filter ul li{line-height: 24px; padding: 5px; margin-left: 5px}
.pro_filter ul li a{display: block;padding:3px; cursor: pointer; position: relative}
.pro_filter ul li a:after{content: '';position: absolute; width: 100%;height:2px; bottom: 0; left: 0; opacity: 0; background: rgb(var(--rgb-main-color))}
.pro_filter ul li.on a{color: rgb(var(--rgb-main-color))}
.pro_filter ul li.on a:after{opacity: 1}
 @media(max-width:768px){
 .pro_filter dt{width: auto; text-align: left}
 .pro_filter dt b{padding-left: 2em}
 .pro_filter dd{width: 100%}
 }

.pro_series .pic{width: 65%}
.pro_series .pic figure{padding-bottom:60%;}
.pro_series .info{width: 32%; padding: 4% 0}
.pro_series .info .title{padding-bottom:6%}
.pro_series .info ul{padding:6% 0;}
.pro_series .info ul li{width: 48%;padding-top: 3%; padding-bottom: 2%; border-bottom: solid 1px rgb(var(--rgb-000))}
.pro_series .group:nth-child(odd){background:rgba(var(--rgb-000),0.78)}
.pro_series .group:nth-child(even){background: #fbf6f4}
.pro_series .group:nth-child(odd) .pic{order: 2}
.pro_series .group:nth-child(odd) .info{color: rgb(var(--rgb-white))}
.pro_series .group:nth-child(odd) .info .desc{color: rgba(var(--rgb-white), 0.8)}
.pro_series .group:nth-child(odd) .info ul a:not(:hover){color: rgb(var(--rgb-white))}
.pro_series .group:nth-child(odd) .info ul li{border-bottom-color:rgba(var(--rgb-white), 0.6) }

@media(max-width:768px){
.pro_series .pic,
.pro_series .info{width:100%}
.pro_series .pic{order: -1!important}
}

.product_list ul{margin: 0 -.15rem}
.product_list li{width:25%; padding: .15rem}
.product_list li a{position: relative}
.product_list .pic figure{padding-bottom:134%;}
.product_list .txt{position: absolute; width: 100%; bottom: 0; z-index: 10; background: rgba(255,255,255,0.5); padding: .2rem}
.product_list .txt h4{color: rgb(var(--rgb-222))}
 @media(max-width:768px){
 .product_list li{width: 50%}
 }
 
.main_product .Pages{padding-bottom: 6%}

.case_list .pic figure{padding-bottom:62.5%;}
@media(min-width:1025px){
.case_list ul:after,
.case_list li{width: 32%}
.case_list ul:after{content: '';}
.case_list li:nth-child(3) ~ li{margin-top:2%}
.case_list li .txt{color: #fff; position: absolute; width: 100%; bottom: 0; padding:40% .3rem .3rem .3rem; background:linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.8)); transition: 0.5s}
.case_list li:hover .txt{color: rgb(var(--rgb-main-color)); background:linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.3))}
}
@media(max-width:1024px){
.case_list li{width:48%}
.case_list li .txt{padding: .2rem 0}
}


.sub_title{border-bottom: solid 1px rgb(var(--rgb-main-color)); margin-bottom: 3%;}
.sub_title b{display: inline-block;border-bottom: solid 2px rgb(var(--rgb-red)); color: rgb(var(--rgb-red))}

.recommend {padding-top: 4%}
.recommend .swiper-slide{padding: .2rem}
.recommend .pic figure{padding-bottom:134%;}
.recommend .txt{position: absolute; width: 100%; bottom: 0; z-index: 10; background: rgba(255,255,255,0.5); padding: .2rem}
.recommend .txt h4{color: rgb(var(--rgb-222))}
.recommend .swiper-pagination{position: relative; bottom: auto; padding:.3rem 0}

.video_list .pic figure{padding-bottom:62.5%;}
@media(min-width:1025px){
.video_list ul:after,
.video_list li{width: 32%}
.video_list ul:after{content: '';}
.video_list li:nth-child(3) ~ li{margin-top:2%}
.video_list li .txt{color: #fff; position: absolute; width: 100%; bottom: 0; padding:40% .3rem .3rem .3rem; background:linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.8)); transition: 0.5s}
.video_list li:hover .txt{color: rgb(var(--rgb-main-color)); background:linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.3))}
}
@media(max-width:1024px){
.video_list li{width:48%}
.video_list li .txt{padding: .2rem 0}
}

.news_slide{background:rgba(var(--rgb-main-color),0.05);border-radius: 0 0 10px 0; margin-bottom: 5%}
.news_slide .pic{width: 50%;}
.news_slide .pic figure{padding-bottom:68.572%}
.news_slide .txt{width: 50%; padding:5%; color:rgb(var(--rgb-666));}
.news_slide .txt h4{margin-top: .4rem; margin-bottom: .2rem}
.news_slide .txt h4 a{color:rgb(var(--rgb-main-color))}
.news_slide .txt h5{margin-bottom: .1rem}
.news_slide .more_a{padding-top: 8%}
@media(max-width:640px){
.news_slide{background-size:25%;background-position: right bottom}
.news_slide .pic,
.news_slide .txt{width: 100%;}
.news_slide .txt h4{margin-top: .2rem; }
}
.news_list ul:after,
.news_list li{width: 30%}
.news_list ul:after{content: '';}
.news_list li a{padding-bottom:.48rem;display: block; position: relative}
.news_list .pic figure{padding-bottom:75%; border-radius: 0 0 2vw 0;box-shadow: 0 12px 13px rgba(147,81,117,0.07);}
.news_list .txt h4{margin: .1rem 0}
.news_list .txt time,
.news_list .txt p{color:rgb(var(--rgb-666));}

@media(min-width:1025px){
.news_list li:nth-child(3) ~ li{margin-top: 5%}
.news_list .txt{position: absolute; width:90%;padding:6%; margin: auto; left: 0; right: 0; bottom: 0;background: #fff;border-radius: 0 0 2vw 0; box-shadow: 0 12px 13px rgba(147,81,117,0.07);transition: 0.5s;}
.news_list .txt:after{content: '';position: absolute;left: -.1rem; bottom: -.1rem; width: 100%; height:calc(100% + .1rem); border-radius: 0 0 2vw 0;border-left: solid 1px rgba(var(--rgb-main-color),0.5); border-bottom: solid 1px rgba(var(--rgb-main-color),0.5); transition: 0.5s}
.news_list .txt p{margin-bottom: -.4rem;position: relative; opacity: 0; transition: 0.5s}
.news_list li:hover .txt{padding: 7% 6%}
.news_list li:hover .txt p{margin-bottom: 0; opacity: 1}
.news_slide .swiper-pagination{width: 50%; left: 50%; bottom: .4rem}
}
@media(max-width:1024px){
.news_list li{width: 100%}
.news_list ul:after{display: none}
.news_list li{margin-bottom:5%}
.news_list li a{display: flex; justify-content: space-between; padding-bottom: 0}
.news_list .pic{width: 30%}
.news_list .txt{width: 70%;padding: 4%;background: #fff;border-radius: 0 0 2vw 0; box-shadow: 0 12px 13px rgba(147,81,117,0.07);}
}
@media(max-width:640px){
.news_list .txt{padding: 0 4%}
.news_list .txt h4{-webkit-line-clamp:2!important;}
.news_list .txt p{display: none}
}


.news_info .title{padding:2% 0}
.news_info .title time{color:rgb(var(--rgb-666))}
.news_info .title p span{padding-right: 2vw}
.news_info .article{padding:4% 0; border-top: solid 1px #ebebeb; border-bottom: solid 1px #ebebeb;color:rgb(var(--rgb-666))}
.news_info .w800{max-width: 8rem; margin: auto}
.news_info .back{text-align: center; padding-top: .3rem}
.news_info .back a{text-align: left}
.news_info .back a:after{width: 16px; height: 17px; background-image: url(../images/back.svg)}
.prev_next{padding:1% 0}
.prev_next li{margin-top: .1rem}
@media(min-width:768px){
.prev_next li{max-width:48%;}
}
@media(max-width:768px){
.news_info .title,
.news_info .article{padding:4% 0}
.news_info .back{text-align: center;padding-bottom: 4%}
.prev_next li:not(:last-child){margin-bottom: 3%}
}

.product_details{padding-bottom: 4%}
.product_details .photo{width: 50%}
.product_details .details{width: 46%}
.product_details .details p span{display: block;padding: 5px 0}
.product_details .swiper-slide figure{padding-bottom: 60%;}
.product_details .small_pic figure img{ opacity: 0.5; transition: 0.5s; cursor: pointer}
.product_details .small_pic .swiper-slide-thumb-active figure img{opacity: 1}
.product_details .small_pic{margin-top: .2rem; position: relative; padding: 0px .5rem}
.product_details .small_pic .swiper-button-next,
.product_details .small_pic .swiper-button-prev{width: .4rem;height: 100%; top: 0;margin-top: 0; border-radius: 0}
.product_details .small_pic .swiper-button-prev{left: 0}
.product_details .small_pic .swiper-button-next{right: 0}
@media(max-width:768px){
.product_details .photo,
.product_details .details{width:100%}
.product_details .details{padding-top: 4%}
}

.form_group .form_item{width: 32%}
.form_group .form_item[rel=full]{width: 100%}
.form_group .form_item{padding: .1rem 0}
.form_group .form_label{font-weight: 700; padding: .1rem 0}
.form_group .text,
.form_group select{width: 100%; border-radius: 6px;height: 40px; line-height: 40px; padding: 0px 10px; border: solid 1px #ccc}
.form_group textarea.text{height: 150px;}
.form_group select{display: block!important; width: 32%}
.form_btn{text-align: center; padding: 4% 0}
.form_btn input{width: 48%; max-width: 1.6rem;height: .48rem; color: #fff; background: rgb(var(--rgb-main-color)); cursor: pointer; border: none; transition: 0.5s}
.form_btn input:hover{background: #000}
@media(max-width:768px){
.form_group .form_item{width: 100%}
.form_group select{width: 100%; margin-bottom: .1rem}
}
/*index start*/
.ind_banner{position: relative}
.ind_banner .box{position: absolute; width: 100%; top: 50%; transform: translateY(-50%); z-index: 10}
.ind_banner .info{width: 60%; color: #fff;}
.ind_banner .info :where(h3 span,p,.more_a){opacity:0;transform:translateY(1rem);transition:0.5s}
.ind_banner h3{line-height: 1.3}
.ind_banner h3 span{display: block;}
.ind_banner h3 span.cn{transition-delay:0.1s; }
.ind_banner h3 span.en{transition-delay:0.5s; font-weight: 500 }
.ind_banner .desc{padding:2% 0}
.ind_banner p{transition-delay:0.8s}
.ind_banner .more_a{transition-delay:1.2s}
.ind_banner .more_a a:not(:hover){background: rgba(0,0,0,0.1); box-shadow: 0 0 0 1px rgba(var(--rgb-main-color),0.5)}
.ind_banner .pic img{width: 100%;transition:1s linear 2s; transform:scale(1.1,1.1);}
.ind_banner .swiper-slide-active .info :where(h3 span,p,.more_a){opacity:1;transform:translateY(0)}
.ind_banner .swiper-slide-active img,
.ind_banner .swiper-slide-duplicate-active img{transition:6s linear;transform:scale(1,1);}
@media(min-width:1024px){
.ind_banner .wap{display: none}
.ind_banner .swiper-pagination{width: auto!important; left: auto!important; right: 10%; top:50%; margin: auto; filter: brightness(0) invert(1);}
.ind_banner .swiper-pagination-bullet{display: block; margin: 30px 0!important}
}
@media(max-width:1024px){
.ind_banner .pc{display: none}
.ind_banner .info{width: 80%}
.ind_banner .desc{display: none}
}

.ind_title{padding-bottom: 3%}
.ind_title span{display: block}
.ind_title span.en{font-weight: 100}
.ind_title span.cn{font-weight: 700}

.ind_about{background: url("../images/bg.jpg") repeat; color:#000}
.ind_about .detail{position: relative;width: 38%}
.ind_about .info{padding-bottom: 5%}
.ind_about .iconlogo{width:30%; position: absolute; right: 0; bottom: 0;opacity: 0.3}
.ind_about .photo{width: 60%; position: relative}
.ind_about .tit{position: absolute; line-height: 1.2; top:35%; left: 50%; transform: translate(-50%,-50%); z-index: 2; text-align: center;}
.ind_about .tit b{display: block}
@media(max-width:1024px){
.ind_about .detail,
.ind_about .photo{width: 100%}
.ind_about .detail{margin-bottom: 4%}
}
@media(max-width:640px){
.ind_about .tit{position: initial;transform: none; padding-bottom: 3%}
}

.ind_product .list{position: relative}
.ind_product .pic figure{padding-bottom:45%;}
.ind_product .txt{text-align: center; padding: .15rem 0}
.ind_product .txt .en{text-transform: uppercase}
.ind_product .swiper{padding: 0 18%}
.ind_product .swiper-pagination{position: relative; bottom: auto}
@media(max-width:1024px){
.ind_product .txt h4{--wlc: 2!important;}
.ind_product .txt span{display: block}
.ind_product .pic figure{padding-bottom:65%;}
}

.ind_news{background: url("../images/bg.jpg") repeat; }
.ind_news .list{margin-left: -.2rem; margin-right: -.2rem;position: relative;}
.ind_news .swiper-slide{padding:0 .2rem;}
.ind_news .item{display: block; position: relative; box-shadow: 0 12px 13px rgba(147,81,117,0.07);}
.ind_news .pic figure{padding-bottom:60%;}
.ind_news .txt{position: absolute; width:100%;padding:3%; margin: auto; left: 0; right: 0; bottom: 0;background:rgba(var(--rgb-white),0.98);transition: 0.5s;}
.ind_news .txt h4{}
.ind_news .txt time{opacity: 0.8}
.ind_news .item:hover .txt{color: #fff; background: rgba(var(--rgb-main-color),0.9)}
.ind_news .more_a{text-align: center;padding-top:2%;}
.ind_news .more_a a{text-align: left}
.ind_news .swiper-pagination{position: relative;bottom: auto; padding-top: 1%}
@media(max-width:768px){
.ind_news .list{margin: 0}
}

/*index end*/